<template>
  <!-- 视频页面 -->
  <div class='see'>
    <!-- 顶部的提示打开app -->
    <Come-back-home />
    <!-- 中间的大标题 -->
    <Film-title title="视频" />
    <!-- 导航栏 color改变下面的导航条的颜色 line-width改变导航条的宽度 -->
    <van-tabs color="#F03D37"
              line-width="20px"
              v-model="active">
      <!-- 导航项  navTitle应该是从后台请求得到的-->
      <van-tab v-for="navTitle in navTitles"
               :key="navTitle.id">

        <!-- 注意每一个导航项的名字 是navTtile 不是item-->
        <!-- <div @click="getVideos(item.id)"> -->

        <template #title>
          <div @click="getMovieList(navTitle.id)">
            {{navTitle.title}}
          </div>
        </template>

        <!-- 下面的视频列表 -->
        <div class="videoBox">
          <!-- 引用封装的视频组件 -->
          <videoplay v-for="movielist in movieList"
                     :key="movielist.id"
                     :movielist="movielist">
            <!-- 利用插槽，改变播放按钮的样式 这样写方便控制子组件 否则直接在子组件上写点击函数 父组件监听不到 -->
            <template #btn>
              <div
                class="play-but"
                @click.prevent="goToSeeDetail(movielist)"
              ></div>
            </template>
          </videoplay>
          <!-- <div class="empty"></div> -->
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// 引入视频子组件
import videoplay from '../../components/see/videoPlay'
export default {
  data: () => ({
    // navTitles用于存储导航数组
    navTitles: [],
    // movieList: [{
    //   filmtitle: '《你好李焕英》并非穿越片，贾玲进入的只是李焕英的梦',
    //   bgimg: 'http://p0.meituan.net/movie/e98f154c6cc20fb3e30bafdea23d00f960015.jpg',
    //   videosrc: 'https://vod.pipi.cn/d5457264vodtranscq1251246104/4b5846b15285890814847230657/v.f42905.mp4',
    //   upimg: 'https://img.meituan.net/avatar/6c9fa102de35a4e3a6798e16d7071dbc34589.jpg',
    //   upname: '不洁看看',
    //   likes: '56',
    //   comment: '44',
    //   alltime: '01:47'
    // }, {
    //   filmtitle: '《唐探3》定档大年初一，预告片充满日本味道，Q侦探身份将被揭秘',
    //   bgimg: 'http://p0.meituan.net/movie/82aae2ac55c9107c0d0c5d59397148932694051.png',
    //   videosrc: 'https://vod.pipi.cn/d5457264vodtranscq1251246104/4683fcba5285890808869169351/v.f42905.mp4',
    //   upimg: 'http://p0.meituan.net/moviemachine/ce862a3fb5b45e285c411a646fc8250e340695.png',
    //   upname: '花生十七',
    //   likes: '554',
    //   comment: '23',
    //   alltime: '01:32'
    // }],
    movieList: [],
    active: localStorage.saveId === undefined ? 0 : JSON.parse(localStorage.saveId)
  }),
  created () {
    // 模拟请求到的导航数组
    // const titleData = [
    //   {
    //     id: 0,
    //     isdel: 0,
    //     title: '热映'
    //   },
    //   {
    //     id: 1,
    //     isdel: 0,
    //     title: '预告'
    //   },
    //   {
    //     id: 2,
    //     isdel: 0,
    //     title: '说电影'
    //   },
    //   {
    //     id: 3,
    //     isdel: 0,
    //     title: '佳片'
    //   },
    //   {
    //     id: 4,
    //     isdel: 0,
    //     title: '热播剧'
    //   },
    //   {
    //     id: 5,
    //     isdel: 0,
    //     title: '盘点'
    //   }]
    // 将请求到的数据赋值给本地导航数组
    // this.navTitles = titleData
    // console.log(localStorage.saveId)
    // console.log(typeof (localStorage.saveId))
    this.getMovieSort()
    if (localStorage.saveId === undefined) {
      console.log('qqqqqqqqqq')
      localStorage.saveId = 0
    }
    this.getMovieList(Number(localStorage.saveId) + 1)
  },
  methods: {
    async getMovieSort () {
      const res = await this.$http.getMovieSort()
      // console.log(res)
      // console.log(res.data.message)
      this.navTitles = res.data.message
    },
    // 待用，用于切换导航条时,视频盒子不同内容的展示
    async getMovieList (id) {
      localStorage.saveId = id - 1
      const res = await this.$http.getMovieList(id)
      console.log(res)
      console.log(res.data.message)
      this.movieList = res.data.message
      // this.movieList = this.movieList.concat(res.data.message)
    },
    // 点击播放按钮，跳到视频的详情页
    goToSeeDetail(movielist) {
      console.log(1)
      const {
        videosrc, upimg, upname, isv, filmtitle
      } = movielist
      // 这里记得阻止默认行为,因为最外层包了个a标签 否则跳转过去就直接刷新--a标签自带的刷新功能，路由会有问题
      // console.log(myid)
      this.$router.push({
        name: 'seeDetail',
        // 这里必须以对象解析的格式
        params: { videosrc, upimg, upname, isv, filmtitle }
      })
    }
  },
  // 注册视频子组件
  components: {
    videoplay
  }
}
</script>
<style lang="scss">
.see {
  padding-bottom: 50px;
  // 因为app里面有自带的背景颜色，全部切换成自己的白色背景色
  background: #fff;
  // 整个导航栏
  .van-tabs__nav {
    // 导航项的默认字体大小和颜色
    .van-tab {
      font-size: 15px;
      color: #333;
    }
    // 导航项选中时字体变粗，字体大小变大（同级别所以要提升权重）
    .van-tab--active {
      font-weight: bold;
      font-size: 17px !important;
    }
  }

  // 下面的视频盒子
  .videoBox {
    // 让导航条不显得那么狭窄
    margin-top: 3px;
    // 去掉a标签自带的下划线
    .link {
      text-decoration: none;
    }
    // 每一个视频项
    .video-item {
      // 播放按钮
      .play-but {
        // 设置层级，必须先设置成绝对定位
        z-index: 1;
        // 视频项设置了相对定位
        position: absolute;
        // 按钮要设置大小。调节位置整体居中，自身宽高会占取一部分，所以要相应的移动位置
        left: 50%;
        top: 50%;
        width: 54px;
        height: 54px;
        margin-left: -27px;
        margin-top: -27px;
        background-image: url(http://s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
        // background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
        // background-size：contain;图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。
        background-size: contain;
      }
    }
    .empty {
      height: 50px;
      background: #fff;
    }
  }
}
</style>
